<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="餐饮管理系统">
    <meta name="keywords" content="HTML,CSS,餐饮,用户">
    <meta name="author" content="Marinda">
    <!-- Link Swiper's CSS -->

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>订单页</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="public/css/swiper.min.css">
    <link rel="stylesheet" href="public/css/orders.css">
    <!--icon 矢量图标 -->
    <link rel="stylesheet"
        href="https://at.alicdn.com/t/font_2813781_gsa66hcs0vw.css?spm=a313x.7781069.1998910419.81&file=font_2813781_gsa66hcs0vw.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</head>

<body>
    <!-- 订单页 -->
    <div class="container">
        <header>
            <div class="logo_xs_view col-xs-8 col-lg-6 col-sm-3 col-md-6">
                <div class="logo col-xs-12 col-sm-10 col-md-10 col-lg-12">
                    <img src="public/image/logo.png" alt="餐饮系统" class="col-xs-4 col-sm-4 col-md-6 col-lg-2" width="50px"
                        height="50px">
                    <h1  class="col-lg-3 col-xs-8 col-sm-8 col-md-8">订单处理</h1>
                </div>
            </div>
            <!-- 
                导航栏应有 返回首页

             -->
            <nav class="navs col-xs-4 col-sm-4 col-md-4 col-lg-6">
                <ul>
                    <li class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><a href="#">返回首页</a></li>
                </ul>
            </nav>
        </header>

        <!-- 主要内容包含有
        
            1.订单头 checkBox
            2.订单菜品名称 
            3.订单台号
            4.下单用户uid 存写uuid
            5.消费金额
            6.处理时间
            
            新增时间以及处理时间交给controller 处实现
            菜品uid处可通过controller dto处理实现
            发送订单以及处理订单时间 交由后端处理
        -->
        <main class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <!-- 订单标题格式 -->
            <div class="orders_title col-xs-12 col-sm-12 col-lg-12 col-md-12">
                <div class="orders_title_uid col-xs-2 col-sm-2 col-lg-2 col-md-2">
                    <span class="col-xs-12 col-sm-12 col-md-12 col-lg-12">单号</span>
                </div>

                <div class="orders_title_id col-xs-2 col-sm-2 col-lg-2 col-md-2">
                    <span class="col-xs-12 col-lg-12 col-sm-12 col-md-12">台号</span>
                </div>

                <div class="orders_title_meal_uid col-xs-2 col-sm-2 col-lg-2 col-md-2">
                    <span class="col-xs-12 col-lg-12 col-sm-12 col-md-12">菜单uid</span>
                </div>
                
                <div class="orders_title_user_uid col-xs-2 col-sm-2 col-lg-2 col-md-2">
                    <span class="col-xs-12 col-lg-12 col-sm-12 col-md-12">用户uid</span>
                </div>
                
                <div class="orders_title_pay_number col-xs-2 col-sm-2 col-lg-2 col-md-2">
                    <span class="col-xs-12 col-lg-12 col-sm-12 col-md-12">金额</span>
                </div>


            </div>
            <!-- items 
                饱含内容order_uid 台号uid 菜单多个uid,用户uid 金额 通过js默认生成uuid / 控制器生成uuid
            -->
            <div class="orders_items col-xs-12 col-lg-12 col-md-12 col-sm-12">
                <!-- 订单号 -->
                <div class="orders_checkBox col-sm-2 col-xs-2 col-md-2 col-lg-2"><input type="checkbox" name="order_uid" ><span class="checkbox_orders_id">1</span></div>
                <!-- 台号 -->
                <div class="orders_id col-sm-2 col-xs-2 col-md-2 col-lg-2"> <span class="col-sm-12 col-xs-12 col-md-12 col-lg-12">001</span></div>
                <!-- 菜单uid -->
                <div class="order_meal_id col-sm-2 col-xs-2 col-md-2 col-lg-2"><span class="col-sm-12 col-xs-12 col-md-12 col-lg-12">0100</span></div>
                <!-- 用户uid -->
                <div class="order_user_id col-sm-2 col-xs-2 col-md-2 col-lg-2"><span class="col-sm-12 col-md-12 col-lg-12 col-xs-12">001</span></div>
                 <!-- 金额 -->
                <div class="order_pay_number col-sm-2 col-xs-2 col-md-2 col-lg-2"><span class="col-sm-12 col-md-12 col-lg-12 col-xs-12">100.00￥</span></div>
            </div>

        </main>
         <!-- 按钮处理 -->
         <footer class="col-xs-12 col-sm-12 col-md-12 col-lg-12" >
            
            <!-- 已选 -->
            <div class="orders_select col-xs-12col-sm-12 col-md-12 col-lg-12">
                <p class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="text-align: right;">已选：<span class="orders_select_number">5</span>项</p>
            </div>
            <!-- 结算按钮 -->
            <div class="orders_query col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <p class="col-xs-12 col-sm-12 col-md-5 col-lg-10"><div class="orders_query_button col-xs-12 col-sm-12 col-md-12 col-lg-2">提交订单</div></p>
                
            </div>
         </footer>
    </div>
</body>

</html>